<script setup lang="ts">
definePageMeta({
    layout: 'default',
    title: '充值记录',
    i18n: 'menu.rechargeList',
})
const router = useRouter();
const dataArr = ref([
    {
        date: '4月16日',
        list: [
            {
                title: '金额支付',
                time: '2023-04-16 12:24:00',
                amount: '999999',
                status: '等待支付',
            },
            {
                title: '金额支付',
                time: '2023-04-16 12:24:00',
                amount: '888888',
                status: '支付成功',
            },
        ],
    },
    {
        date: '4月20日',
        list: [
            {
                title: '金额支付',
                time: '2023-04-20 12:24:00',
                amount: '666666',
                status: '已到账',
            },
        ],
    },
]);
const goDetails = () => {
    router.push('/recharge/details')
}
const getColor = (s: string) => {
    switch (s) {
        case '等待支付':
            return 'color-#f9a826'
        case '支付成功':
            return 'color-#00c48d'
        case '已到账':
            return 'color-#00c48d'
        default:
            return 'color-#f9a826'
    }
}
</script>

<template>
    <div mx-auto text-16 text-dark dark:text-white>
        <div v-for="(group, groupIndex) in dataArr" :key="groupIndex"
            class="w-full bg-#ffffff pt-18 pb-8 rounded-10 mb-10">
            <div>
                <div class="font-bold px-20">{{ group.date }}</div>
                <div class="w-full h-1 bg-#f6f6f6 my-10"></div>
                <div class="px-20">
                    <div v-for="(item, itemIndex) in group.list" :key="itemIndex"
                        class="flex justify-between items-center rounded-10 bg-#ffffff my-10" @click="goDetails()">
                        <div>
                            <div>{{ item.title }}</div>
                            <div class="text-12 color-#b1b0be">{{ item.time }}</div>
                        </div>
                        <div class="flex items-center">
                            <div>
                                <div class="font-bold">{{ item.amount }}</div>
                                <div class="text-12 color-#b1b0be" :class="getColor(item.status)">{{ item.status }}
                                </div>
                            </div>
                            <van-icon name="arrow" size="20" color="#bfbec4" class="ml-5" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
